<template>
  <div>
      <top-bar></top-bar>
      <left-bar :datas='data'></left-bar>
      <div class="homepage">
         <home-bar :currentPage='currentPage'></home-bar>
          <div class="home-main">
              <div class="home-main-top">
                  <div class="home-main-p-l">
                    <h2>Hi 管理员！</h2>
                    <div>欢迎使用中国医药物联网联盟商家后台管理系统！您不在的日子里，系统运行妥妥的。</div>
                  </div>
              </div>
              <div class="home-main-sec clear">
                  <div class="home-main-sec2 home-main-secs fl">
                      <div class="home-main-sec-top">
                        今日成交
                      </div>
                      <div class="home-main-deal clear">
                          <div class="fl home-main-deal-l">
                              <canvas id="dealDay" width="130" height="65">
                              </canvas>
                              <img src="../images/deal-days.png"  class="dealDay-img" alt="">
                              <img src="../images/deal-arrow.png" alt="" class="dealDay-imgs">
                              <div class="home-main-deal-num">
                                  <h3>
                                    ￥1000000
                                  </h3>
                                  <p>系统今日成交</p>
                              </div>
                          </div>
                          <div class="fl home-main-deal-r">
                              <ul>
                                <li>
                                  平均每小时成交￥10000.00
                                </li>
                                <li>
                                  平均每小时 0.5笔订单
                                </li>
                                <li>
                                  平均每小时有M人访问我的批发商城
                                </li>
                                <li>
                                  已经给N位客户发出库存预警
                                </li>
                              </ul>
                          </div>
                      </div>
                  </div>
                  <div class="home-main-sec3 home-main-secs  fl">
                      <div class="home-main-sec-top">
                        当前信用分
                      </div>
                      <div class="home-main-score clear">
                          <div class="home-main-score-l fl">
                              我的信用分
                          </div>
                      </div>
                      <div class="home-main-scores clear">
                          <div class="home-main-scoress fl">
                            <el-rate
                              v-model="valueScore"
                              disabled
                              text-color="#ff9900"
                              score-template="{value}">
                          </el-rate>
                          </div>
                          <div class="home-main-score-l fl">
                              10000分
                          </div>
                          
                      </div>
                     <div class="home-main-scores home-main-scores-top clear">
                         <div class="fl">
                            <img src="../images/rankings.png" alt="">
                         </div>
                         <div class="fl home-main-scores-ri">
                            <div class="home-main-score-r">
                              <img src="../images/ranking1.png" alt="">
                              <span>全国排名：第100名</span>
                            </div>
                            <div class="home-main-score-r">
                              <img src="../images/ranking2.png" alt="">
                              <span>上月第一名商家：100000分</span>
                            </div>
                         </div>
                        
                     </div>
                  </div>
                  <div class="home-main-sec1 home-main-secs  fl">
                      <div class="home-main-sec-top">
                        红包奖励
                      </div>
                    <swiper :options="swiperOption" ref="mySwiper">
                　　　　<swiper-slide v-for="(item,index) in envelopes" :key="index">
                            <div class="envelopes-data">
                               {{item.date}}
                            </div>
                            <div class="item-money">
                                {{item.money}}
                            </div>
                            <div class="item-click">
                                点击领取
                            </div>
                　　　　</swiper-slide> 
                　　</swiper>
                　  <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div> 
                  </div>
              </div>
              <div class="home-main-transaction">
                <div class="home-main-transactions">24小时统计</div>
                <div id="myChart" :style="{ height: '500px'}"></div>
              </div>
              <div class="home-main-message clear">
                  <div class="home-main-message-l home-main-messages fl">
                      <div class="home-main-message-t">
                          消息通知
                      </div>
                      <ul>
                        <li>
                          穿心莲草药库存剩余10盒
                          <span class="fr">2018-04-07</span>
                        </li>
                        <li>
                          穿心莲草药库存剩余10盒
                          <span class="fr">2018-04-07</span>
                        </li>
                        <li>
                          穿心莲草药库存剩余10盒
                          <span class="fr">2018-04-07</span>
                        </li>
                        <li>
                          穿心莲草药库存剩余10盒
                          <span class="fr">2018-04-07</span>
                        </li>
                        <li>
                          穿心莲草药库存剩余10盒
                          <span class="fr">2018-04-07</span>
                        </li>
                      </ul>
                  </div>
                  <div class="home-main-message-r  fl">
                      <div class="home-main-message-t">
                          24小时货款到账趋势
                      </div>
                      <div id='myCharts' :style="{ height: '300px'}">

                      </div>
                  </div>
              </div>
              <div class="home-main-message clear">
                  <div class="home-main-message-l fl">
                      <div class="home-main-message-t">
                          我的积分
                      </div>
                      <div class="my-integral clear">
                          <div class="my-integral-l fl">
                              <div id="myIntegral" >
                                  
                              </div>
                          </div>
                          <div class="my-integral-r fl">
                              <div class="my-integral-r-t">
                                <div>100000<span>分</span></div>
                                <div class="my-integral-r-ts">今日获得积分</div>
                              </div>
                              <div class="my-integral-r-t  my-integrals-r-t">
                                <div>100000<span>分</span></div>
                                <div class="my-integral-r-ts">昨日获得积分</div>
                              </div>
                          </div>
                      </div>
                      <div class="my-integral-bo">
                        <ul class="clear">
                          <li>全国积分排名
                            <span>第一</span>
                          </li>
                          <li>积分增速
                            <span>40分/小时</span>
                          </li>
                          <li>平均每小时获得
                            <span>1000积分</span>
                          </li>
                          <li>比昨天增长了
                            <span>1000积分</span>
                            </li>
                        </ul>
                      </div>
                  </div>
                  <div class="home-main-message-r  fl">
                      <div class="home-main-message-t">
                          24小时信息费缴纳情况
                      </div>
                      <div id='myPay' :style="{ height: '300px'}">

                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import topBar from "../public/top";
import leftBar from "../public/left";
import homeBar from "../public/homebar";
// 引入基本模板
let echarts = require("echarts/lib/echarts");
// 引入柱状图组件
require("echarts/lib/chart/line");
require("echarts/lib/chart/bar");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");

export default {
  components: {
    leftBar,
    topBar,
    homeBar
  },
  data() {
    return {
      data: '/homepage',
      currentPage:{path:"/homepage",name:"我的主页"},
      envelopes: [
        {
          date: "2018.04.03",
          money: "0.5"
        },
        {
          date: "2018.04.05",
          money: "1.3"
        },
        {
          date: "2018.04.06",
          money: "1.0"
        }
      ],
      swiperOption: {
        slidesPerView: "auto",  
        //centeredSlides: true,
        loop: true,
        //loopedSlides: 5,
        autoplay: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      },
      valueScore: 5.0
    };
  },
  mounted() {
    this.drawLine();
    this.drawDeal();
    this.drawReturn();
    this.drawIntegral();
    this.drwaPay();

    
  },
  methods: {
    drawLine() {
      let myChart = echarts.init(document.getElementById("myChart"));
      // 绘制24小时交易统计图表
      let option = {
        tooltip: {
          trigger: "axis"
        },
        color:['#ffc400','#16c4c9'],
        legend: {
          data: ["昨天交易统计", "今日交易统计"]
        },
        tooltip: {
          show: true,
          trigger: "axis",
          backgroundColor: "#16c4c9"
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            data: [
              "1:00",
              "2:00",
              "3:00",
              "4:00",
              "5:00",
              "6:00",
              "7:00",
              "8:00",
              "9:00",
              "10:00",
              "11:00",
              "12:00",
              "13:00",
              "14:00",
              "15:00",
              "16:00",
              "17:00",
              "18:00",
              "19:00",
              "20:00",
              "21:00",
              "22:00",
              "23:00",
              "24:00"
            ]
          }
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              formatter: "￥{value}"
            }
          }
        ],
        series: [
          {
            name: "昨天交易统计",
            type: "bar",
            barWidth : 10,
            data: [
              2.0,
              4.9,
              7.0,
              23.2,
              25.6,
              76.7,
              135.6,
              162.2,
              32.6,
              20.0,
              6.4,
              3.3,
              2.0,
              4.9,
              7.0,
              23.2,
              25.6,
              76.7,
              135.6,
              162.2,
              32.6,
              20.0,
              6.4,
              3.3
            ],
          },
          {
            name: "今日交易统计",
            type: "bar",
            barWidth : 10,
            data: [
              2.6,
              5.9,
              9.0,
              26.4,
              28.7,
              70.7,
              175.6,
              182.2,
              48.7,
              18.8,
              6.0,
              175.6,
              182.2,
              48.7,
              18.8,
              6.0,
              175.6,
              182.2,
              48.7,
              18.8,
              6.0,
              175.6,
              182.2,
              48.7,
              
            ],
          }
        ]
      };
      myChart.setOption(option, true);
      window.addEventListener("resize", function() {
      myChart.resize();
      });
    },
    drawDeal() {
      //绘制今日成交
      let canvas = document.getElementById("dealDay");
      let ctx = canvas.getContext("2d");
      setTimeout(function() {
        ctx.beginPath();
        ctx.fillStyle = "#05a7ac";
        ctx.translate(65, 65);
        ctx.moveTo(0, 0);
        ctx.arc(0, 0, 65, 4, Math.PI * 2, true);
        ctx.fill();

        ctx.beginPath();
        ctx.fillStyle = "#fff";
        ctx.moveTo(0, 0);
        ctx.arc(0, 0, 35, 0, Math.PI * 2, true);
        ctx.fill();
      }, 500);
      let img = new Image();
      img.src = "static/images/deal-day.png";
      img.onload = function() {
        ctx.drawImage(img, 0, 0, 130, 65);
      };
    },
    drawReturn() {
      //绘制24小时货款返还趋势
      let myCharts = echarts.init(document.getElementById("myCharts"));
      let options = {
        title: {
          text: ""
        },
        color: "#16c4c9",
        tooltip: {
          show: true,
          trigger: "axis",
          backgroundColor: "#16c4c9"
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["1:00", "3:00", "7:00", "12:00", "16:00", "20:00", "23:00"]
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "￥{value} "
          }
        },
        series: [
          {
            name: "货款返回值",
            type: "line",
            stack: "总量",
            symbol: "circle",
            symbolSize:8, 
            itemStyle: {
                normal: {
                    color: '#16c4c9',  
                    borderColor: "#16c4c9"  
                }
            },
            data: [120, 132, 101, 134, 90, 230, 210]
          }
        ]
      };
      myCharts.setOption(options, true);
      window.addEventListener("resize", function() {
      myCharts.resize();
      });
    },
    drawIntegral() {
      //绘制积分
      let myIntegral = echarts.init(document.getElementById("myIntegral"));
      let options = {
        title: {
          text: ""
        },
        color: ["#5cd055", "#16c4c9"],
        tooltip: {
          show: true,
          trigger: "axis",
          backgroundColor: "#16c4c9"
        },
        legend: {
          data: ["昨日获得积分", "今日获得积分"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["1:00", "1:00", "1:00", "1:00", "1:00", "1:00", "1:00"]
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "昨日获得积分",
            type: "line",
            stack: "总量",
            symbol:'none',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: "今日获得积分",
            type: "line",
            stack: "总量",
             symbol:'none',
            data: [220, 182, 191, 234, 290, 330, 310]
          }
        ]
      };
      myIntegral.setOption(options, true);
      window.addEventListener("resize", function() {
      myIntegral.resize();
      });
    },
    drwaPay() {
      //绘制24小时信息费缴纳
      let myPay = echarts.init(document.getElementById("myPay"));
      // 绘制24小时交易统计图表
      let option = {
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        tooltip: {
          show: true,
          trigger: "axis",
          backgroundColor: "#16c4c9"
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [
              "0:00",
              "2:00",
              "4:00",
              "6:00",
              "8:00",
              "10:00",
              "12:00",
              "14:00",
              "16:00",
              "18:00",
              "20:00",
              "22:00",
              "24:00"
            ]
          }
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            max: 1500,
            axisLabel: {
              formatter: "￥{value}"
            }
          }
        ],
        series: [
          {
            name: "信息费缴纳值",
            type: "line",
            stack: "总量",
            symbol: "circle",
            symbolSize:8, 
            itemStyle: {
                normal: {
                    color: '#16c4c9',  
                    borderColor: "#16c4c9"  
                }
            },
            // areaStyle: { normal: {
            //    color:['rgba(224,224,224,0.1)'],
            // } },
            data: [
              200,
              600,
              300,
              680,
              1200,
              1000,
              1500,
              860,
              682,
              502,
              400,
              300,
              210
            ]
          },
          {
            name: "信息费缴纳值",
            type: "bar",
            stack: "总量",
            symbol: "circle",
            symbolSize:8, 
            barWidth : 10,
            itemStyle: {
                normal: {
                    color: 'rgba(0,158,163,0.20)',    
                }
            },
            data: [
              200,
              600,
              300,
              680,
              1200,
              1000,
              1500,
              860,
              682,
              502,
              400,
              300,
              210
            ]
          },
        ]
      };
      myPay.setOption(option, true);
      window.addEventListener("resize", function() {
      myPay.resize();
      });
    }
  }
};
</script>

<style lang="less" scoped>
@import "homepage.less";
</style>


